<template>
  <div class="home">
    <!-- 轮播图 -->
    <el-carousel class="banner-img" height="400px">
      <el-carousel-item v-for="(item, i) of banner" :key="i" class="mybanner">
        <img :src="item.img" alt="" />
      </el-carousel-item>
    </el-carousel>
    <!-- 轮播下层 -->
    <div class="banner-floor">
      <div>
        <div class="between">
          <div class="b-icon">
            <!-- 图标 -->
            <div></div>
            <!-- 内容 -->
            <div>
              <p class="num">349,994,287</p>
              <p>节约自然资源(公斤)</p>
            </div>
          </div>
          <div class="b-icon">
            <!-- 图标 -->
            <div></div>
            <!-- 内容 -->
            <div>
              <p class="num">11,893,010</p>
              <p>节约标准煤(公斤)</p>
            </div>
          </div>
          <div class="b-icon">
            <!-- 图标 -->
            <div></div>
            <!-- 内容 -->
            <div>
              <p class="num">29,732,524</p>
              <p>减少垃圾焚烧(公斤)</p>
            </div>
          </div>
          <div class="b-icon">
            <!-- 图标 -->
            <div></div>
            <!-- 内容 -->
            <div>
              <p class="num">55,217,545</p>
              <p>减少垃圾填埋(公斤)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="main">
      <div class="core">
        <!-- 左边的内容 -->
        <div class="left">
          <!-- 第一块政府 -->
          <div class="gover">
            <!-- 导航栏 -->
            <div class="hnav">
              <img src="/img/it/titBG.png" alt="" />
              <h3><router-link to="" class="a">政府关怀</router-link></h3>
            </div>
            <!--新闻  -->
            <div class="xhg_new">
              <!-- 左边图片 -->
              <div class="newimg">
                <img src="/img/homepage/xhgnew.jpg" alt="" />
                <p>成都进入全民垃圾分类时代！小黄狗实力助推</p>
              </div>
              <!-- 右边 -->
              <div class="list">
                <h4>成都进入全民垃圾分类时代！小黄狗实力助推</h4>
                <p>
                  作为智能回收行业的龙头企业，小黄狗环保科技早在2018年年底进驻成都。截至目前，累计铺设智能垃圾分类回收机超过500台，覆盖超400个小区。
                </p>
                <div class="listimg">
                  <img src="/img/side/listBG.png" alt="" />
                  <p>浙皖沪政府领导莅临考察小黄狗四分类回收亭</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 第二块领导考察调研与合作 -->
          <div class="leader">
            <!-- 导航 -->
            <div class="lnav">
              <img src="/img/it/titBG.png" alt="" />
              <h3>
                <router-link to="" class="a">领导考察调研与合作</router-link>
              </h3>
            </div>
            <!-- 一层动画 -->
            <!-- 动画 -->
            <div class="animation">
              <ul class="clearfix">
                <li>
                  <img src="/img/animationbar/animation_one1.jpg" alt="" />
                  <p>小黄狗进驻南宁，市机关事务局副局长点赞</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_one1.jpg" alt="" />
                  <p>小黄狗进驻南宁，市机关事务局副局长点赞</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_one1.jpg" alt="" />
                  <p>小黄狗进驻南宁，市机关事务局副局长点赞</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_one1.jpg" alt="" />
                  <p>小黄狗进驻南宁，市机关事务局副局长点赞</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_one1.jpg" alt="" />
                  <p>小黄狗进驻南宁，市机关事务局副局长点赞</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_one1.jpg" alt="" />
                  <p>小黄狗进驻南宁，市机关事务局副局长点赞</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_one1.jpg" alt="" />
                  <p>小黄狗进驻南宁，市机关事务局副局长点赞</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_one1.jpg" alt="" />
                  <p>小黄狗进驻南宁，市机关事务局副局长点赞</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_one1.jpg" alt="" />
                  <p>小黄狗进驻南宁，市机关事务局副局长点赞</p>
                </li>
              </ul>
            </div>
          </div>
          <!-- 第三块覆盖区 -->
          <div class="cover">
            <!-- 导航 -->
            <div class="cnav">
              <img src="/img/it/titBG.png" alt="" />
              <h3>
                <router-link to="" class="a">小黄狗覆盖</router-link>
              </h3>
            </div>
            <!-- 地图 -->
            <div class="map">
              <!-- 左边 -->
              <div class="mimg">
                <img src="/img/homepage/coverage.jpg" alt="" />
              </div>
              <!-- 右边 -->
              <ul>
                <li>
                  <h3>44</h3>
                  <p>进驻的城市(个)</p>
                </li>
                <li>
                  <h3>1,175</h3>
                  <p>覆盖家庭(万户)</p>
                </li>
                <li>
                  <h3>565</h3>
                  <p>选择我们的用户(万)</p>
                </li>
                <li>
                  <h3>8,469</h3>
                  <p>覆盖小区(个)</p>
                </li>
              </ul>
            </div>
          </div>
          <!-- 第四块财政支持 -->
          <div class="finance">
            <!-- 导航 -->
            <div class="fnav">
              <img src="/img/it/titBG.png" alt="" />
              <h3>
                <router-link to="" class="a">政府支持</router-link>
              </h3>
            </div>
            <!-- 一层动画 -->
            <!-- 动画 -->
            <div class="animation">
              <ul class="clearfix">
                <li>
                  <img src="/img/animationbar/animation_two1.jpg" alt="" />
                  <p>惠州市惠阳区市容环境卫生管理局</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_two1.jpg" alt="" />
                  <p>惠州市惠阳区市容环境卫生管理局</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_two1.jpg" alt="" />
                  <p>惠州市惠阳区市容环境卫生管理局</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_two1.jpg" alt="" />
                  <p>惠州市惠阳区市容环境卫生管理局</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_two1.jpg" alt="" />
                  <p>惠州市惠阳区市容环境卫生管理局</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_two1.jpg" alt="" />
                  <p>惠州市惠阳区市容环境卫生管理局</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_two1.jpg" alt="" />
                  <p>惠州市惠阳区市容环境卫生管理局</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_two1.jpg" alt="" />
                  <p>惠州市惠阳区市容环境卫生管理局</p>
                </li>
                <li>
                  <img src="/img/animationbar/animation_two1.jpg" alt="" />
                  <p>惠州市惠阳区市容环境卫生管理局</p>
                </li>
              </ul>
            </div>
          </div>
          <!-- 第五块合作伙伴 -->
          <div class="partner">
            <!-- 导航 -->
            <div class="pnav">
              <img src="/img/it/titBG.png" alt="" />
              <h3>
                <router-link to="" class="a">合作伙伴</router-link>
              </h3>
            </div>
            <!-- 合作伙伴 -->
            <div class="item">
              <ul>
                <li>
                  <img src="/img/animationbar/cooperation1.png" alt="" />
                </li>
                <li>
                  <img src="/img/animationbar/cooperation2.png" alt="" />
                </li>
                <li>
                  <img src="/img/animationbar/cooperation3.png" alt="" />
                </li>
                <li>
                  <img src="/img/animationbar/cooperation4.png" alt="" />
                </li>
                <li>
                  <img src="/img/animationbar/cooperation5.png" alt="" />
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 右边的内容 -->
        <div class="right">
          <!-- 政务服务 -->
          <div class="serve">
            <el-collapse accordion>
              <el-collapse-item>
                <template
                  slot="title"
                  class="subject"
                  style="background-color: red"
                >
                  政务合作<i class="header-icon"></i>
                </template>
                <div>
                  <input
                    type="text"
                    placeholder="先生/女士"
                    class="input"
                    style="
                      width: 260px;
                      height: 40px;
                      padding: 0 16px;
                      font-size: 18px;
                      margin: 20px 12px;
                      border-radius: 5px;
                      outline: none;
                    "
                  />
                  <input
                    type="text"
                    placeholder="请输入你的手机号码"
                    class="input"
                    style="
                      width: 260px;
                      height: 40px;
                      padding: 0 16px;
                      font-size: 18px;
                      margin: 10px 12px;
                      border-radius: 5px;
                      outline: none;
                    "
                  />
                  <p style="font-size: 13px; text-align: center">
                    请留下您的联系方式，我们的顾问将会与您联系
                  </p>
                  <button
                    style="
                      width: 294px;
                      height: 42px;
                      padding: 0 16px;
                      font-size: 18px;
                      margin: 10px 12px;
                      border: none;
                      background-color: #ffc802;
                    "
                  >
                    提交
                  </button>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <!-- 走进小黄狗 -->
          <div class="enter">
            <!-- 标题 -->
            <div class="title">
              <img src="/img/it/titBG.png" alt="" />
              <h3>走进小黄狗</h3>
              <p>查看更多</p>
            </div>
            <!-- 内容 -->
            <div class="content">
              <img src="/img/side/boss.jpg" alt="" />
              <p>
                小黄狗环保科技有限公司（简称“小黄狗”）成立于2017年8月，是国内首家智能垃圾分类综合运营服务商，为城市提供全品类垃圾分类一站式解决方案。
              </p>
            </div>
            <!-- 回收流程 -->
            <div class="re">
              <h3>回收流程</h3>
              <p>绿色低碳的美好生活不止于向往，正渐渐成为现实</p>
              <img src="/img/side/recyProcess.jpg" alt="" />
            </div>
          </div>
          <!-- 公益小黄狗 -->
          <div class="public">
            <!-- 标题 -->
            <div class="title">
              <img src="/img/it/titBG.png" alt="" />
              <h3>公益小黄狗</h3>
              <p>查看更多</p>
            </div>
            <!-- 内容 -->
            <div class="content">
              <img src="/img/side/boss2.jpg" alt="" />
              <p>
                7月公益投递项目公示
              </p>
            </div>
            <!-- 底下内容 -->
            <div class="re">
              <img src="/img/side/listBG.png" alt="" />
              <p>“毛孩子守护计划”捐赠反馈来了，快来看看</p>  
            </div>
            <div class="re">
              <img src="/img/side/listBG.png" alt="" />
              <p>“毛孩子守护计划”捐赠反馈来了，快来看看</p>  
            </div>
            <div class="re">
              <img src="/img/side/listBG.png" alt="" />
              <p>“毛孩子守护计划”捐赠反馈来了，快来看看</p>  
            </div>
          </div>
          <!-- 环保知识 -->
          <div class="protection">
            <!-- 标题 -->
            <div class="title">
              <img src="/img/it/titBG.png" alt="" />
              <h3>环保知识</h3>
              <p>查看更多</p>
            </div>
            <!-- 内容 -->
            <div class="content">
              <img src="/img/side/bass3.jpg" alt="" />
              <p>
                上班族们每天会接触到各式各样的生活和办公用品...
              </p>
            </div>
            
          </div>
        </div>
      </div>
    </div>
    <!-- 右下角弹框 -->
    <div class="frame" v-show="hide">
       <!-- 标题 -->
       <div class="title">
         <h3>联系我们</h3>
          <p @click="close">×</p> 
        </div>
       <!-- 内容 -->
       <div class="content">
          <table>
            <tr>
              <td><input type="text" placeholder="请输入留言内容"></td>
            </tr>
            <tr>
              <td><input type="text" placeholder="姓名"></td>
            </tr>
            <tr>
              <td><input type="text" placeholder="请输入您的电话"></td>
            </tr>
            <tr>
              <td><input type="text" placeholder="公司"></td>
            </tr>
            <tr>
              <td><p>我们将会尽快与您联系</p></td>
            </tr>
            <tr>
              <td><div>提交</div></td>
            </tr>
          </table>
       </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      banner: [],
      hide:true
    };
  },
  methods: {
    close(){
      this.hide=false;
    }
    // oneAnimation(){
    //   this.axios.get('/animation/:layer',{params:{layer:this.one}}).then((res)=>{
    //     console.log(res.data);
    //   })
    // }
  },
  mounted() {
    this.axios.get("/v1/carousel/banner").then((res) => {
      // console.log(res.data);
      this.banner = res.data.data;
      // console.log(this.banner[0].img);
    });
    // this.oneAnimation();
  },
};
</script>
<style lang="scss">


@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-848px);
  }
}
.home {
  background-color: #efefef;
  .banner-img {
    width: 100%;
    // height: auto;
    img {
      width: 100%;
      height: 400px;
     
    }
  }
  // 轮播下层
  & .banner-floor {
    background-color: #f4f5f7;
    > div {
      width: 100%;
      height: 120px;
      background-color: white;
      margin-bottom: 52px;
      & .between {
        width: 1200px;
        height: 120px;
        margin: 0 auto;
        overflow: hidden;
        .b-icon {
          float: left;
          margin-top: 34px;
          margin-left: 20px;
          width: 268px;
          height: 65px;

          div:nth-child(1) {
            float: left;
            width: 52px;
            height: 52px;
            background-image: url(/img/banner/sprite.png);
            background-repeat: no-repeat;
            background-position: 0 -1px;
            background-size: 480px auto;
            margin-right: 15px;
            margin-top: 6px;
          }
          :nth-child(2) {
            float: left;
            .num {
              font-size: 30px;
              font-weight: 600px;
              color: #ffc806;
            }
            p {
              font-size: 14px;
              color: #666;
              margin: 0;
            }
          }
        }
        .b-icon:nth-child(2) {
          div:nth-child(1) {
            background-position: 0 -120px;
          }
        }
        .b-icon:nth-child(3) {
          div:nth-child(1) {
            background-position: 0 -58px;
          }
        }
        .b-icon:nth-child(4) {
          div:nth-child(1) {
            background-position: 0 -180px;
          }
        }
      }
    }
  }

  // 主体部分
  .main {
    width: 100%;
    .core {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      //  左边的内容
      .left {
        padding-bottom: 50px;
        float: left;
        // 第一块政府
        .gover {
          background-color: #fff;
          width: 848px;
          // 导航
          .hnav {
            overflow: hidden;
            height: 24px;
            padding: 19px 0;
            line-height: 24px;
            border-bottom: 1px solid #f5f5f5;
            img {
              display: block;
              float: left;
            }
            h3 {
              font-size: 20px;
              float: left;
              margin-left: 30px;
              .a {
                text-decoration: none;
                color: #4c4a42;
              }
            }
          }
          // 新闻
          .xhg_new {
            overflow: hidden;
            // 左边
            .newimg {
              position: relative;
              float: left;
              margin: 0 10px;
              img {
                width: 380px;
                height: 245px;
              }
              p {
                font-size: 15px;
                color: #fff;
                text-align: center;
                width: 380px;
                height: 48px;
                line-height: 48px;
                background-color: rgba(0, 0, 0, 0.4);
                position: absolute;
                bottom: 3px;
              }
            }
            // 右边
            .list {
              width: 396px;
              float: left;
              margin-left: 20px;
              h4 {
                font-size: 18px;
                font-weight: 400;
                color: #7f8080;
                margin: 16px 0 10px;
              }
              p {
                color: #bdbebf;
                font-size: 13px;
                line-height: 21px;
              }
              .listimg {
                height: 30px;
                line-height: 30px;
                margin-top: 30px;
                img {
                  float: left;
                  margin-right: 20px;
                  margin-top: 5px;
                }
                p {
                  font-size: 14px;
                  color: #7f8080;
                }
              }
            }
          }
        }
        // 第二块
        .leader {
          width: 848px;
          margin-top: 23px;
          padding: 15px 0 26px;
          background-color: #fff;
          // 导航
          .lnav {
            overflow: hidden;
            height: 24px;
            padding: 19px 0;
            line-height: 24px;
            border-bottom: 1px solid #f5f5f5;
            img {
              display: block;
              float: left;
            }
            h3 {
              font-size: 20px;
              float: left;
              margin-left: 30px;
              .a {
                text-decoration: none;
                color: #4c4a42;
              }
            }
          }
          // 一层动画
          .animation {
            width: 848px;
            overflow: hidden;
            ul:hover {
              animation-play-state: paused;
            }
            ul {
              width: 1696px;
              animation: 10s move linear infinite;
              list-style: none;
              li {
                width: 180px;

                float: left;

                img {
                  display: block;
                  width: 85%;
                  margin: 0 auto;
                }
                p {
                  width: 170px;
                  font-size: 13px;
                  height: 40px;
                  text-align: center;
                }
              }
            }
          }
        }
        // 第三块小狗覆盖区
        .cover {
          width: 848px;
          margin-top: 23px;
          background-color: #fff;
          // 导航
          .cnav {
            overflow: hidden;
            height: 24px;
            padding: 19px 0;
            line-height: 24px;
            border-bottom: 1px solid #f5f5f5;
            img {
              display: block;
              float: left;
            }
            h3 {
              font-size: 20px;
              float: left;
              margin-left: 30px;
              .a {
                text-decoration: none;
                color: #4c4a42;
              }
            }
          }
          // 地图
          .map {
            height: 315px;
            // 左边
            .mimg {
              float: left;
              img {
                width: 380px;
                height: 315px;
              }
            }
            //右边
            ul {
              float: left;
              list-style: none;
              width: 324px;
              height: 182px;
              overflow: hidden;
              margin-top: 56px;
              margin-left: 36px;
              li {
                width: 130px;
                height: 62px;
                float: left;
                margin: 30px 16px 9px;
                h3 {
                  color: #666;
                  font-size: 27px;
                }
                p {
                  color: #7f8080;
                  font-size: 13px;
                }
              }
            }
          }
        }
        // 第四块财政支出
        .finance {
          width: 848px;
          margin-top: 23px;
          padding: 15px 0 26px;
          background-color: #fff;
          // 导航
          .fnav {
            overflow: hidden;
            height: 24px;
            padding: 19px 0;
            line-height: 24px;
            border-bottom: 1px solid #f5f5f5;
            img {
              display: block;
              float: left;
            }
            h3 {
              font-size: 20px;
              float: left;
              margin-left: 30px;
              .a {
                text-decoration: none;
                color: #4c4a42;
              }
            }
          }
          // 二层动画
          .animation {
            width: 848px;
            overflow: hidden;
            ul:hover {
              animation-play-state: paused;
            }
            ul {
              width: 1696px;
              animation: 10s move linear infinite;
              list-style: none;
              li {
                width: 180px;

                float: left;

                img {
                  display: block;
                  width: 90%;
                  margin: 0 auto;
                }
                p {
                  width: 170px;
                  font-size: 12px;
                  height: 40px;
                  text-align: center;
                }
              }
            }
          }
        }
        //第五层合作伙伴
        .partner {
          width: 848px;
          margin-top: 23px;
          background-color: #fff;
          // 导航
          .pnav {
            overflow: hidden;
            height: 24px;
            padding: 19px 0;
            line-height: 24px;
            border-bottom: 1px solid #f5f5f5;
            img {
              display: block;
              float: left;
            }
            h3 {
              font-size: 20px;
              float: left;
              margin-left: 30px;
              .a {
                text-decoration: none;
                color: #4c4a42;
              }
            }
          }
          // 合作方
          .item {
            height: 200px;
            margin-top: 10px;

            ul {
              float: left;
              list-style: none;
              width: 848px;
              height: 182px;
              overflow: hidden;

              li {
                width: 186px;
                height: 84px;
                float: left;
                border: 1px solid #f5f5f5;
                margin: 0 10px 9px;
                img {
                  width: 186px;
                  height: 84px;
                }
              }
            }
          }
        }
      }
      //右边的内容
      .right {
        width: 330px;
        // height: 90px;
        float: right;
        .el-collapse-item__header {
          background-color: #ffc806;
          color: #fff;
          font-size: 24px;
          font-weight: 600;
          text-align: center;
          width: 330px;
          height: 90px;
        }
        // 进入小黄狗
        .enter {
          margin-top: 25px;
          width: 330px;
          height: 483px;
          padding-top: 20px;
          background-color: #fff;
          //标题
          .title {
            overflow: hidden;
            img {
              display: block;
              float: left;
              // line-height: 60px;
              margin-right: 20px;
            }
            h3 {
              float: left;
              // height: 60px;
              // line-height: 60px;
              color: #4c4a3f;
            }
            p {
              float: right;
              font-size: 13px;
              color: #bdbebf;
              // line-height: 60px;
            }
          }
          //内容
          .content {
            width: 100%;
            margin-top: 25px;
            img {
              display: block;
              width: 293px;
              height: 150px;
              margin: 0 auto;
              margin-bottom: 20px;
            }
            p {
              width: 293px;
              height: 94px;
              line-height: 22px;
              margin: 0 auto;
              color: #7f8080;
            }
          }
          //回收流程
          .re{
            width: 100%;
            height: 144px;
            margin-top: 25px;
            h3{
              width: 293px;
              margin: 0 auto;
              color:#7F8082 ;
              font-size: 16px;
            }
            img {
              display: block;
              width: 293px;
              height: 52px;
              margin: 0 auto;
              margin-top: 26px;
            }
            p {
              width: 293px;
              // height: 150px;
              line-height: 22px;
              margin: 0 auto;
              color: #7f8080;
            }
          }
        }
        // 公益小黄狗
        .public {
          margin-top: 25px;
          width: 330px;
          height: 410px;
          padding-top: 20px;
          background-color: #fff;
          //标题
          .title {
            overflow: hidden;
            img {
              display: block;
              float: left;
              // line-height: 60px;
              margin-right: 20px;
            }
            h3 {
              float: left;
              // height: 60px;
              // line-height: 60px;
              color: #4c4a3f;
            }
            p {
              float: right;
              font-size: 13px;
              color: #bdbebf;
              // line-height: 60px;
            }
          }
          //内容
          .content {
            width: 100%;
            margin-top: 25px;
            img {
              display: block;
              width: 293px;
              height: 150px;
              margin: 0 auto;
              margin-bottom: 20px;
            }
            p {
              width: 293px;
              height: 24px;
              line-height: 22px;
              margin: 0 auto;
              color: #7f8080;
            }
          }
          //回收流程
          .re{
            width: 100%;
            // height: 144px;
            margin-top: 25px;
            overflow: hidden;
            img {
              display: block;
              float: left;
            }
            p {
              float: left;
              margin: 0 auto;
              color: #7f8080;
            }
          }
        }
        // 环保知识
        .protection {
          margin-top: 25px;
          width: 330px;
          height: 435px;
          padding-top: 20px;
          background-color: #fff;
          //标题
          .title {
            overflow: hidden;
            img {
              display: block;
              float: left;
              // line-height: 60px;
              margin-right: 20px;
            }
            h3 {
              float: left;
              // height: 60px;
              // line-height: 60px;
              color: #4c4a3f;
            }
            p {
              float: right;
              font-size: 13px;
              color: #bdbebf;
              // line-height: 60px;
            }
          }
          //内容
          .content {
            width: 100%;
            margin-top: 25px;
            img {
              display: block;
              width: 293px;
              height: 150px;
              margin: 0 auto;
              margin-bottom: 20px;
            }
            p {
              width: 293px;
              height: 24px;
              line-height: 22px;
              margin: 0 auto;
              color: #7f8080;
            }
          }
          
        }
      }
    }
  }
  // 右下角部分
  .frame{
    width: 260px;
    height: 407px;
   background-color: #fff;
   position:fixed;
   right: 0;
   bottom: 0;
   z-index:1000;
    .title{
      background-color: #ffc806;
      overflow: hidden;
      padding:0 20px;
      color: #fff;
      cursor: pointer;
      h3{
        font-size: 18px;
        height: 33px;
        line-height: 33px;
        float: left;
      }
      p{
        font-size: 24px;
        height: 33px;
        line-height: 33px;
        font-weight: 900;
        float: right;
      }
    }
    // 内容
    .content{
      margin: 0 auto;
      width: 226px; 
      margin-top: 10px;
      
      table{
        tr:nth-child(1){
          input{
            height: 32px;
            text-align: left;
            line-height: 0;
            padding-bottom: 50px;
            outline: none;
          }
        }
        tr{
          td{
            
            input{
              width: 205px;
              height: 32px;
              margin: 10px;
              outline: none;
             
            }
            p{
              width: 226px;
              height: 17px;
              text-align: center;
              font-size: 12px;
              margin: 0 10px;
            }
            div{
              width: 120px;
              height: 36px;
              line-height: 36px;
              text-align: center;
              color: #fff;
              background-color: #ffc806;
              margin: 0 auto;
              border-radius: 18px;
            }
       
          }
         
        }
      }
    }
  }
}
</style>